<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交大校园码</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="js/qrcode.min.js"></script>
    <script src="js/script.js"></script>
    <script src="node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js"></script>
    <link rel="stylesheet" href="./node_modules/vue-slider-component/theme/default.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="app">
    <div class="container">
        <div class="floatMenu" style="display: none;">
            <h4>学号</h4><input type="number" name="stuNum" id="stuNumInput"
                              class="inputBox" v-model="stuNo">
            <h4>姓名</h4><input type="text" name="stuName" id="stuNameInput"
                              class="inputBox" v-model="stuName">
            <h4>书院和班级</h4><input type="text" name="stuPos" id="stuPosInput"
                                                                  class="inputBox" v-model="stuPosition">
            <h4>学位</h4>
            <select class="inputBox" v-model="stuDegree">
                <option>本科生</option>
                <option>研究生</option>
                <option>留学生</option>
            </select>
            <h4>生成码颜色</h4>
            <select class="inputBox" v-model="generateColorOfCode">
                <option>紫码</option>
                <option>绿码</option>
            </select>
            <h4>报到日期</h4><input type="date" name="reportDate" id="reportDateInput"
                                class="inputBox"
                                v-model="reportDate">
            <h4>报到时间</h4><input type="time" name="reportTime" id="reportTimeInput"
                                class="inputBox"
                                v-model="reportTime">
            <h4>离校时间</h4><input type="time" name="outDateTime" id="outTimeInput"
                                class="inputBox"
                                v-model="outTimeFrom">
            <h4>返校时间</h4><input type="time" name="inDateTime" id="inTimeInput"
                                class="inputBox" v-model="outTimeTo">
            <h4>自定义二维码内容(留空以随机生成)</h4><input type="text" name="qrCode" id="qrCodeInput"
                                             class="inputBox"
                                             v-model="qrCode">
            <h4>照片</h4><input type="file" name="imageUpload" id="imageUploadInput" accept="image/*"
                              @change="changeImage">
            <h4>照片边框宽度</h4>
            <vue-slider class="widthSlider" v-model="photoBorderWidth" width="230px" :data="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]"></vue-slider>
            <h4>复制下面的URL以在任何地方访问该紫码</h4>
            <input readonly type="text" name="urlText" class="inputBox"
                   v-model="computedURL">
            <button class="submitButton" id="submitButton" @click="writeInfoToCache">将信息保存到缓存</button>
        </div>
        <div class="topContainer"
             :class=" {'undergraduateBackground': isUndergraduate, 'graduateBackground': isGraduate, 'overseaBackground': isOversea} ">
            <img :src="photoURL" class="photograph" alt="this is your photo"
                 onerror="this.src='img/default.jpg';this.οnerrοr=null;"
                 :style="{borderWidth: photoBorderWidth + 'px'}"/>
            <div class="textContainer">
                <p>{{ stuNo }} {{ stuName }} <small class="smallText">{{ stuDegree }}</small></p>
                <p>{{ stuPosition }}</p>
            </div>
        </div>
        <div class="mainContentContainer">
            <div class="dataContainer">
                <div class="title">
                    <h3>当前时间：</h3>
                </div>
                <div class="timeDate">
                    <div id="date">{{ nowDate }}</div>
                    <div id="time">{{ nowTime }}</div>
                    <p>已于 {{ reportDate }} {{ reportTime }} 完成报到登记</p>
                    <p v-if="isPurple">外出时间<span class="green">{{ today }} {{ outTimeFrom }}</span>至<span
                            class="green">{{ today }}
                                {{ outTimeTo }}</span>
                    </p>
                </div>
            </div>
            <div class="qrContainer">
                <div class="degreeBar"
                     :class=" {'undergraduateBackground': isUndergraduate, 'graduateBackground': isGraduate, 'overseaBackground': isOversea} ">
                </div>
                <p>{{ stuDegree }}</p>
                <div id="qrCodeDisplay"></div>
            </div>
            <div class="propaganda" v-if="isPurple">校园最安全，外出有风险</div>
            <div class="propaganda" v-if="isPurple">其他必须外出的情况</div>
        </div>
    </div>
    <div class="bottomBar">
        <div class="button active" id="menuToggler">
            <i class="icon iconfont icon-daibanshiyiicon"></i>
            <p>交大校园码</p>
        </div>
        <div class="button">
            <i class="icon iconfont icon-daibanshiyiicon"></i>
            <p>返校申请</p>
        </div>
        <div class="button">
            <i class="icon iconfont icon-daibanshiyiicon"></i>
            <p>外出申请</p>
        </div>
        <div class="button">
            <i class="icon iconfont icon-daibanshiyiicon"></i>
            <p>转码申请</p>
        </div>
    </div>
    <script src="js/app.js">
    </script>
</div>
</body>

</html>